<script setup lang="ts">
import { useAttrs } from "vue";

const attr = useAttrs();
// 1=健康 2=风险 3=危险
const stateMap = new Map([
  [1, { text: "健康", color: "#2bf32b" }],
  [2, { text: "风险", color: "#e9e30f" }],
  [3, { text: "危险", color: "red" }]
]);
const cpuState = (() => {
  if (attr.remoteData) {
    let arr: any = [];
    for (const argumentsKey in attr.remoteData.cpu) {
      arr.push({
        name: argumentsKey,
        data: attr.remoteData.cpu[argumentsKey]
      });
    }
    if (arr?.length) {
      if (arr.some(item => item.data.some(i => i <= 60))) {
        return 1;
      }
      if (arr.some(item => item.data.some(i => i >= 80))) {
        return 3;
      }
    }
  }
  return 2;
})();
console.log(`cpuState:::`, cpuState);

// 内存
const memState = (() => {
  if (attr.remoteData.mem?.length) {
    if (attr.remoteData.mem.some(item => item <= 60)) {
      return 1;
    }
    if (attr.remoteData.mem.some(item => item >= 80)) {
      return 3;
    }
  }
  return 2;
})();
// 磁盘
const diskState = (() => {
  if (attr.remoteData.disk?.length) {
    if (attr.remoteData.disk.some(item => item <= 60)) {
      return 1;
    }
    if (attr.remoteData.disk.some(item => item >= 80)) {
      return 3;
    }
  }
  return 2;
})();
</script>

<template>
  <div>
    <div class="state" v-box>
      <h3 style="margin-bottom: 20px">系统整体状况</h3>
      <div class="h-box">
        <p style="width: 130px; text-align: right">24小时CPU监测：</p>
        <p style="font-size: 22px" class="mg-l-lg" :style="{ color: stateMap.get(cpuState).color }">
          {{ stateMap.get(cpuState).text }}
        </p>
      </div>
      <div class="h-box">
        <p style="width: 130px; text-align: right">24小时内存监测：</p>
        <p style="font-size: 22px" class="mg-l-lg" :style="{ color: stateMap.get(memState).color }">
          {{ stateMap.get(memState).text }}
        </p>
      </div>
      <div class="h-box">
        <p style="width: 130px; text-align: right">磁盘使用状况：</p>
        <p style="font-size: 22px" class="mg-l-lg" :style="{ color: stateMap.get(diskState).color }">
          {{ stateMap.get(diskState).text }}
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 350px;
}
</style>
